@extends('layouts.appManager')

@section('style')
    <style>
        .el-alert{
            padding: 0px 16px !important;
        }
    </style>
@endsection
@section('content')
<div class="container py-5">

    <input type="hidden" id="serverItem" value="{{ json_encode($server)}}">

    <input type="hidden" id="serverVersion" value="{{$server->getVersion()}}">
    <input type="hidden" id="isOld" value="{{$server->isOld()}}">

    <input type="hidden" id="serverId" value="{{$server->id}}">
    <input type="hidden" id="business" value="{{$server->business}}">
    <input type="hidden" id="serverState" value="{{$server->state}}">
    <input type="hidden" id="serverTmp" value="{{$server->template}}">
    <input type="hidden" id="serverInfo" value="{{$server->info??""}}">
    <input type="hidden" id="serverQQGroup" value="{{$server->qq_group ?? ''}}">
    <input type="hidden" id="serverMods" value="{{$server->mods ?? ''}}">
    <input type="hidden" id="world_server_conf" value="{{$server->world_server_conf ?? ''}}">
    <input type="hidden" id="showRank" value="{{$server->ext['showRank']=="1" ? 1:0}}">
    <input type="hidden" id="showMoney" value="{{$server->ext['showMoney']=="1" ? 1:0}}">
    <input type="hidden" id="showRecommend" value="{{$server->ext['showRecommend']=="1" ? 1:0}}">
    <input type="hidden" id="showMall" value="{{$server->ext['showMall']=="1" ? 1:0}}">
{{--    <input type="hidden" id="showSpell" value="{{$server->ext['showSpell']=="1" ? 1:0}}">--}}
    <input type="hidden" id="payforlevel" value="{{$server->ext['payforlevel']=="1" ? 1:0}}">
    <input type="hidden" id="payforlevelMax" value="{{$server->ext['payforlevelMax'] ?? config('conf.serverDef.payforlevelMax')}}">
    <input type="hidden" id="moneyForPerLevel" value="{{$server->ext['moneyForPerLevel'] ?? config('conf.serverDef.moneyForPerLevel')}}">
    <input type="hidden" id="timetomoney" value="{{$server->ext['timetomoney']=="1" ? 1:0}}">
    <input type="hidden" id="timetomoneyRatio" value="{{$server->ext['timetomoneyRatio'] ?? config('conf.serverDef.timetomoneyRatio')}}">
    <input type="hidden" id="timetoscore" value="{{$server->ext['timetoscore'] ?? config('conf.serverDef.timetoscore')}}">
    <input type="hidden" id="bgUrl" value="{{$server->ext['bgUrl'] ?? ''}}">
    <input type="hidden" id="loginUrl" value="{{$server->ext['loginUrl'] ?? ''}}">
    <input type="hidden" id="announcement" value="{{$server->ext['announcement'] ?? ''}}">
    <input type="hidden" id="patch_info" value="{{$server->ext['patch_info'] ?? ''}}">
{{--    {{dd($server)}}--}}
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="系统配置" name="base">
            <div class="mt-3">
                <el-form :label-position="labelPosition" label-width="200px" >
                    {{--<el-form-item label="网站横幅背景" prop="bgUrl">
                        <el-input v-model="dataBase.bgUrl"  max="100">
                        </el-input>
                    </el-form-item>--}}

                    <el-form-item label="玩家网站风格" prop="serverTmp">
                        <el-select v-model="serverTmp" placeholder="请选择">
                            <el-option label="默认" value=""></el-option>
                            <el-option label="模板A" value="a"></el-option>
                            <el-option label="模板B（全自定义）" value="b"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="在列表中展示" prop="serverState">
                        <el-select v-model="serverState" placeholder="请选择">
                            <el-option label="不显示" value="0"></el-option>
                            <el-option label="显示" value="1"></el-option>
                            <el-option label="推荐" value="2" disabled="disabled"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="显示排行榜" prop="showRank">
                        <el-switch
                            v-model="dataBase.showRank"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="1"
                            inactive-value="0">
                        </el-switch>
                    </el-form-item>
                    <hr>
                    <el-form-item label="开启商业功能" prop="business">
                        <el-switch
                            v-model="business"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="1"
                            inactive-value="0">
                        </el-switch>
                    </el-form-item>
                    <div v-if="business==='1'">

                    <el-form-item label="显示积分" prop="showMoney">
                        <el-switch
                            v-model="dataBase.showMoney"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="1"
                            inactive-value="0">
                        </el-switch>
                    </el-form-item>

                    <el-form-item label="显示推广" prop="showRecommend">
                        <el-switch
                            v-model="dataBase.showRecommend"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="1"
                            inactive-value="0">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="显示商城" prop="showMall">
                        <el-switch
                            v-model="dataBase.showMall"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="1"
                            inactive-value="0">
                        </el-switch>
                    </el-form-item>


                    <el-form-item label="开启付费升级" prop="payforlevel">
                        <el-switch
                                v-model="dataBase.payforlevel"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="1"
                                inactive-value="0">
                        </el-switch>
                    </el-form-item>

                    <el-form-item label="付费升级的最高等级" prop="payforlevelMax">
                        <el-input v-model="dataBase.payforlevelMax" type="number" step="1" min="60" max="100">
                            <template slot="append">积分</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="付费升级每级的价格" prop="moneyForPerLevel">
                        <el-input v-model="dataBase.moneyForPerLevel" type="number" step="1" min="1" max="1000">
                            <template slot="append">积分</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="开启在线时间兑换" prop="timetomoney">
                        <el-switch
                                v-model="dataBase.timetomoney"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="1"
                                inactive-value="0">
                        </el-switch>
<span class="ml-5">
                        <el-switch
                            v-model="dataBase.timetoscore"
                            active-color="#f549ff"
                            inactive-color="#ffd949"
                            active-text="积分"
                            inactive-text="金币"
                            active-value="1"
                            inactive-value="0">
                        </el-switch>
</span>
                    </el-form-item>
                    {{--<el-form-item label="在线时间兑换金币变为积分" prop="timetoscore">
                        <el-switch
                            v-model="dataBase.timetoscore"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="1"
                            inactive-value="0">
                        </el-switch>
                    </el-form-item>--}}
                    <el-form-item label="在线时间兑换率" prop="timetomoneyRatio">
                        <el-input v-model="dataBase.timetomoneyRatio" type="number" step="1"  min="1" max="1000">
                            <template slot="append">分钟 兑换 1 @{{ dataBase.timetoscore==='1'?'积分':'金币' }}</template>
                        </el-input>
                    </el-form-item>
                    </div>

                    <hr>
                    <el-form-item label="QQ群" prop="loginUrl">
                        <el-input v-model="serverQQGroup"  max="100"></el-input>
                    </el-form-item>
                    <el-form-item label="服务端介绍" prop="loginUrl">
                        <el-alert  v-if="serverTmp=='b'"
                            title="自定义模板，无内容，支持html"
                            type="success">
                        </el-alert>
                        <div id="coder" style="height: 500px"></div>
{{--                        <el-input v-show="serverTmp!='b'" v-model="serverInfo" type="textarea" :rows="10" max="1000"></el-input>--}}
                    </el-form-item>

                    <br>
                    <div class="text-right">
                        <el-button type="primary" @click="configBaseUpdate">保存</el-button>
                    </div>
                    <br><br>
                </el-form>
            </div>

        </el-tab-pane>
        <el-tab-pane label="登录器配置" name="LoginConfig">
            <div class="mt-3">
                <el-form :label-position="labelPosition" label-width="200px" >
                    <el-form-item label="自制登录器下载地址" prop="loginUrl">
                        <el-input v-model="dataBase.loginUrl"  max="100">
                            <el-button slot="append" icon="el-icon-star-on" @click="launcherOn">生成特色登录器</el-button>
                        </el-input>
                    </el-form-item>



<!--                    <el-form-item label="服务器公告" prop="announcement">
                        <el-input v-model="dataBase.announcement" type="textarea" :rows="10" max="200"></el-input>
                    </el-form-item>

                    <el-form-item label="补丁信息" prop="patch_info">
                        <el-input v-model="dataBase.patch_info" type="textarea" :rows="10" max="100"></el-input>
                    </el-form-item>-->
                    <br>
                    <div class="text-right" v-if="dataBase.loginUrl!=='/launcher'">
                        <el-button type="primary" @click="configBaseUpdate">保存</el-button>
                    </div>
                    <div v-if="dataBase.loginUrl==='/launcher'">
                        <div class="mb-2">特色登录器链接配置</div>
                        <el-form-item label="客户端下载地址" v-if="launcherConfig_links.length>0">
                            <el-input placeholder="不填使用默认下载地址" v-model="launcherConfig_links[0]"></el-input>
                        </el-form-item>
                        <el-form-item label="加入QQ群链接" v-if="launcherConfig_links.length>1">
                            <el-input placeholder="" v-model="launcherConfig_links[1]"></el-input>
                        </el-form-item>
                        <br>

                        <div class="mb-2">轮播新闻配置</div>
                        <div>
                            <el-alert
                                title="请严格按照格式配置，否则会引起登录器崩溃！"
                                type="error" :closable="false">
                            </el-alert>
                           <el-input v-if="launcherConfig" type="textarea" :rows="5" v-model="launcherConfig.news"> </el-input>
                        </div>

                        <div class="small mt-2">
                            填入格式：<code>新闻标题</code>#<code>新闻副标题</code>#<code>轮播图片地址</code>#<code>轮播点击链接地址</code> (每行配置1个)
                            <br>
                            例子：<code>上线福利系统</code>#<code>福利系统详细使用说明以及最新福利码【点击查看】</code>#<code>http://hx.phasercn.com/download/text_mod/01.jpg</code>#<code>http://hg.wowbest.top</code>
                            <br>
                            说明：图片最佳尺寸：<code>1140x405</code>。 本系统暂不提供文件存储功能，文件存储推荐七牛云。
                        </div>

                        <div class="mb-2 mt-5">补丁文件配置</div>
                        <div>
                            <el-alert
                                title="请严格按照格式配置，否则会引起登录器崩溃！"
                                type="error" :closable="false">
                            </el-alert>
                            <el-input v-if="launcherConfig" type="textarea" :rows="5" v-model="launcherConfig.patchlist"> </el-input>
                        </div>

                        <div class="small mt-2">

                            填入格式：<code>补丁文件下载地址</code>#<code>文件名</code>#<code>文件MD5码</code>#<code>文件大小(字节)</code> (每行配置1个)
                            <br>
                            例子：<code>http://hx.phasercn.com/download/text_mod/patch-zhCN-666.MPQ</code>#<code>patch-zhCN-666.MPQ</code>#<code>85A143A6464BE422E048F8DFDA88DD22</code>#<code>3073768</code>
                            <br>
                            说明： 本系统暂不提供文件存储功能，文件存储推荐七牛云。
                        </div>

                        <div v-if="test">
                            <div class="mb-2 mt-5">补丁文件删除配置</div>
                            <div>
                                <el-alert
                                    title="请严格按照格式配置，否则会引起登录器崩溃！"
                                    type="error" :closable="false">
                                </el-alert>
                                <el-input v-if="launcherConfig" type="textarea" :rows="5" v-model="launcherConfig.patchtodel"> </el-input>
                            </div>

                            <div class="small mt-2">
                                填入格式：<code>补丁文件名</code> (每行配置1个)
                                <br>
                                例子：<code>patch-zhCN-666.MPQ</code>
                            </div>
                        </div>



                        {{--<div class="text-right">
                            <el-button type="primary" @click="launcherConfig_news.push('')">添加</el-button>
                        </div>--}}

                        <div class="text-right">
                            <el-button type="primary" @click="launcherConfigSave">保存</el-button>
                        </div>
                    </div>
                    <br><br>
                </el-form>
            </div>
        </el-tab-pane>
        <el-tab-pane label="游戏配置" name="WorldServerConf" v-if="isOld">

            <el-tabs tab-position="left">
                <el-tab-pane  v-for="type in worldServerConf_def"  :label="type.label" style="padding-right: 30px;">
                    <el-form label-width="300px">
                    <div v-for="item in type.data" v-if="!item.hide" >
                        <el-form-item>

                            <template slot="label">
                                @{{ item.label }}

                                <el-tooltip v-if="item.description" slot="prefix"  effect="dark" :content="item.description" placement="right">
                                    <i class="el-input__icon el-icon-info"></i>
                                </el-tooltip>

                                ：
                            </template>

                            <el-input v-if="item.type=='number'&&!item.min&&!item.max"
                                      v-model="item.value" type="number" min="0"></el-input>
                            <el-switch
                                    v-else-if="item.type=='number'&&item.min==0&&item.max==1"
                                    v-model="item.value"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    :active-value="1"
                                    :inactive-value="0">
                            </el-switch>
                            <el-slider v-else-if="item.type=='number'" :min="item.min" :max="item.max" :step="item.min==0.1?0.1:(item.step?item.step:1)" v-model="item.value" show-input></el-slider>
                            <el-select v-else-if="item.type=='select'" v-model="item.value">
                                <el-option
                                        v-for="op in item.options"
                                        :key="op.value"
                                        :label="op.label"
                                        :value="op.value">
                                </el-option>
                            </el-select>
                            <el-input v-else-if="item.type=='textarea'" :type="item.type" :rows="20" v-model="item.value"></el-input>
                            <el-input v-else :type="item.type" v-model="item.value"></el-input>
                        </el-form-item>
                    </div>
                    </el-form>
                </el-tab-pane>

            </el-tabs>
            <br>
            <div class="text-right">
                <el-button type="primary" @click="updateWorldServerConf">保存</el-button>
                <el-button type="primary" @click="reLoadWorldServerConf">重载配置</el-button>
            </div>
            <br><br>
        </el-tab-pane>
    </el-tabs>

</div>

@endsection

@section('script')
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/monaco-editor/0.21.2/min/vs/loader.min.js" type="application/javascript"></script>
    <script src="{{asset('js/config/worldServerConf'.$server->version.'.js')}}?v=4"></script>
    <script src="{{asset('js/config/modsConf.js')}}?v=2"></script>
    <script>
        require.config({'vs/nls': {availableLanguages: {'*':'zh-cn'}}});
        require.config({paths: { 'vs': 'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/monaco-editor/0.21.2/min/vs' }});
        var app = new Vue({
            el: '#app',
            data: {
                test:false,
                serverItem:JSON.parse($('#serverItem').val()),
                serverVersion:$('#serverVersion').val(),
                isOld:$('#isOld').val(),
                serverId:$('#serverId').val(),
                business:$('#business').val(),
                serverState:$('#serverState').val(),
                serverTmp:$('#serverTmp').val(),
                serverInfo:$('#serverInfo').val(),
                serverQQGroup:$('#serverQQGroup').val(),
                serverMods:$('#serverMods').val().split(','),
                world_server_conf:JSON.parse($('#world_server_conf').val()||'{}'),

                labelPosition: 'right',
                activeName: 'base',
                dataBase:{
                    payforlevel: $('#payforlevel').val(),
                    payforlevelMax: $('#payforlevelMax').val(),
                    showRank: $('#showRank').val(),
                    showMoney: $('#showMoney').val(),
                    showRecommend: $('#showRecommend').val(),
                    showMall: $('#showMall').val(),
                    // showSpell: $('#showSpell').val(),
                    moneyForPerLevel: $('#moneyForPerLevel').val(),
                    timetomoney: $('#timetomoney').val(),
                    timetomoneyRatio:$('#timetomoneyRatio').val(),
                    timetoscore:$('#timetoscore').val(),
                    bgUrl:$('#bgUrl').val(),
                    loginUrl:$('#loginUrl').val(),
                    announcement:$('#announcement').val(),
                    patch_info:$('#patch_info').val(),
                },

                worldServerConf_def:worldServerConf_def,
                worldServerConf:'',

                launcherConfig:null,
                launcherConfig_links:[],
                launcherConfig_news:[],
            },
            mounted() {
                console.log(this.serverItem);
                var t=this;
                modsConf.forEach(function (item) {
                    if( t.serverMods.indexOf(item.key)>-1){
                        t.worldServerConf_def.push(item);
                    }
                })

                t.worldServerConf_def.forEach(function (e_type) {
                    e_type.data.forEach(function (e_item) {
                        if (t.world_server_conf[e_item.key]) {
                            e_item.value=t.world_server_conf[e_item.key].value;
                        }
                        // else{
                        //     e_item.value=e_item.default;
                        // }
                    })
                });

                if (t.dataBase.loginUrl==='/launcher'){
                    t.getLauncherConfig();
                }

                // app.$nextTick(function() {
                setTimeout(function () {
                    t.initEdit(t.serverInfo);
                },500)

            },
            watch:{
                // launcherConfig(newValue, oldValue){
                //     this.launcherConfig_news=newValue.news.split(',');
                //     this.launcherConfig_links=newValue.links.split(',');
                //     if (this.launcherConfig_links.length===1) this.launcherConfig_links[1]=''
                //     console.log('231');
                // },
            },
            methods: {
                launcherConfigSplit(){
                    // this.launcherConfig_news=this.launcherConfig.news.split(',');
                    this.launcherConfig_links=this.launcherConfig.links.split(',');
                    if (this.launcherConfig_links.length===1) this.launcherConfig_links[1]=''
                },
                launcherConfigSave(){
                    let t=this;
                    t.launcherConfig.links=t.launcherConfig_links[0]+','+t.launcherConfig_links[1];
                    console.log(t.launcherConfig)
                    post("/manager/server/config/launcherConfigSave",{id:t.serverId,launcherConfig:t.launcherConfig},res=>{
                        t.$message({
                            type: 'success',
                            message: '保存成功'
                        });
                        console.log(res);
                    },t);
                },
                getLauncherConfig(){
                    var t=this;
                    post("/manager/server/config/getLauncherConfig",{id:t.serverId},res=>{
                        t.launcherConfig=res.return;
                        t.launcherConfigSplit();
                        console.log(t.launcherConfig);
                    },t);
                },
                launcherOn(){
                    var t=this;
                    t.dataBase.loginUrl='/launcher';
                    post("/manager/server/config/launcherOn",{id:t.serverId},res=>{
                        t.configBaseUpdate();
                        t.getLauncherConfig();
                    },t);
                },
                initEdit(val){
                    var t=this;
                    if (t.editor){
                        t.editor.setValue(val);
                        return;
                    }
                    require(['vs/editor/editor.main',], function () {
                        t.editor = monaco.editor.create(document.getElementById('coder'), {
                            value: val,
                            language: 'html',
                            theme: "vs-dark",
                        });
                        t.editor.onDidChangeModelContent((event) => {
                            t.serverInfo=t.editor.getValue();
                        })
                    });
                },
                handleClick(tab, event) {
                    var t=this;
                    console.log(tab, event);
                    // if (tab.name==='WorldServerConf'){
                    //     post("/manager/server/config/getWorldServerConf",{id:t.serverId},res=>{
                    //         this.worldServerConf=res.data.data;
                    //         console.log(res.data.data);
                    //     },t);
                    // }
                },
                reLoadWorldServerConf(){
                    var t=this;
                    post("/manager/server/config/runGMCommand",{id:t.serverId,command:'reload config'},res=>{
                        if (res.data===1){
                            t.$message({
                                type: 'success',
                                message: '执行成功'
                            });
                        }else{
                            t.$message({
                                type: 'error',
                                message: res.info
                            });
                        }
                        console.log(res.data);
                    },t);
                },
                updateWorldServerConf(){
                    var t=this;
                    var data={};
                    t.worldServerConf_def.forEach(function (e_type) {
                        e_type.data.forEach(function (e_item) {
                            if (e_item.value!==e_item.default){
                                data[e_item.key]={
                                    type:e_item.type,
                                    value:e_item.value
                                };
                            }
                        })
                    });
                    data=JSON.stringify(data);
                        post("/manager/server/config/saveWorldServerConf",{id:t.serverId,data:data},res=>{
                        //缺少错误处理
                        if (res.res) {
                            if (res.res.status) {
                                t.$message({
                                    type: 'success',
                                    message: '修改成功, 请重启游戏服务器或重载配置'
                                });
                            }else {
                                t.$message({
                                    type: 'error',
                                    message: res.res.msg
                                });
                            }
                        }else{
                            t.$message({
                                type: 'error',
                                message: '修改失败, 请检查连接'
                            });
                        }
                        this.worldServerConf=res.data;
                        console.log(res.data);
                    },t);
                },
                configBaseUpdate() {
                    var t=this;
                    post("/manager/server/"+t.serverId+"/configBaseUpdate",{
                        data:t.dataBase,
                        state:t.serverState,
                        business:t.business,
                        tmp:t.serverTmp,
                        serverInfo:t.serverInfo,
                        serverQQGroup:t.serverQQGroup,
                    },res=>{
                        t.$message({
                            type: 'success',
                            message: '修改成功'
                        });
                    },t);
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },

            }
        })
    </script>
@endsection
